<template>
	<view class="user-list d-flex ai-center jc-between animated flipInX fast">
		<image :src="item.userpic" mode="widthFix" lazy-load></image>
		<view class="center flex-1">
			<view class="name">{{item.username}}</view>
			<view class="icon">
				<tag-sex-age :age="item.age" :sex="item.sex"></tag-sex-age>
			</view>
		</view>
		<view class="iconfont right" :class="[item.isfollow ? 'icon-xuanze-yixuan' : 'icon-zengjia1']"></view>
	</view>
</template>

<script>
	import tagSexAge from "./tag-sex-age.vue"
	export default {
		props: {
			item: {
				type: Object
			},
			index: {
				type: Number
			}
		},
		components: {
			tagSexAge
		}
	}
</script>

<style lang="scss" scoped>
	.user-list {
		padding: 20upx 80upx 20upx 40upx;
		border-bottom: 1upx solid #EEEEEE;

		image {
			width: 100upx;
			height: 100upx;
			border-radius: 20upx;
			margin-right: 20upx;
			flex-shrink: 0;
		}

		.center {
			.name {
				font-size: 34upx;
				color: #333333;
			}

			.icon {
				display: inline-block;
			}
		}

		.right {
			color: #DDDDDD;
			font-size: 40upx;

			&.icon-zengjia1 {
				color: #F8791B;
			}
		}
	}
</style>
